<script setup>

</script>

<template>
  <div class="container">
    <div class="qq">
      <div class="navbar">
        <router-link active-class="active-link" class="link" to="/">主页</router-link>
        <router-link active-class="active-link" class="link" to="/xing">行星系</router-link>
        <router-link active-class="active-link" class="link" to="/tai">星系资讯</router-link>
        <a href="" class="link">仓库</a>
      </div>

    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<style >
.qq {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: url('https://bpic.588ku.com/back_pic/06/16/08/6162b5820ebc7ef.jpg') no-repeat center bottom / auto 100px;
  /* 图片定位到底部，并设置高度为100px */
  background-size: 100% 250px;
  /* 设置背景图片的尺寸 */
  z-index: 7;

}

.navbar {
  display: flex;
  justify-content: center;
  background-color: rgba(255, 255, 255);
  padding: 10px 0;
  transition: all .8s;
  opacity: .6;
  z-index: 1000;
}

.navbar:hover {
  opacity: 1;
  background-color: white;
}

/* 链接样式 */
.link {
  font-size: 20px;
  font-weight: bold;
  margin: 0 15px;
  /* 控制链接之间的间隔 */
  text-decoration: none;
  color: rgba(56, 244, 9, 0.671);
  font-size: 16px;
  transition: all 0.5s ease;
  /* 添加过渡效果 */
}

/* 鼠标悬停时的阴影动画效果 */
.link:hover {
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  /* 阴影效果 */
}

/* 当前激活链接的样式 */
.active-link {
  color: rgb(38, 0, 255);
  font-weight: bold;
}
.content {  
  margin-top: 250px; /* 与.qq的高度相匹配，确保内容显示在图片下方 */  
  /* ...其他样式... */  
}
</style>
